<!DOCTYPE html>
<html> 
        <head> <link rel="stylesheet" href="css/resrev.css">

        </head>
        <style>
          [v-cloak] {
              display:none;
          }
        </style>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
          .el-rate__icon{
            font-size: 30px;
          }
          .icon-goods:nth-child(3n-2){
            margin-left: 0;
          }
          .icon-goods:nth-child(1){
            
            margin-top: 0px;
          }
          .icon-goods:nth-child(2){
            
            margin-top: 0px;
          }
          .icon-goods:nth-child(3){
            
            margin-top: 0px;
          }
          .icon-goods{
            margin-left: 30px;
            margin-top: 40px;
          }
        </style>
    <body>
        <header>
          <h1>All Restaurant </h1>
          <img src= './images/areyou.jpg' style='margin-top:100px;width:100px;height:150px;margin-right:1100px'>
        </header>
          <div style="position: fixed;right: 20px;top:10px;width: 100px;height: 50px;line-height: 50px;text-align: center;background-color: #ddd;border-radius: 15px;">
              <a href="index.html" style="list-style: none;color: black;text-decoration: none;">返回首页</a>
          </div>
          <div class="out" id="app" v-cloak>
      
          <ul style="display: flex;flex-wrap: wrap;list-style:none;padding:0;">
              <li class="icon-goods" @click="entry(item)" style="width: 270px;height: 274px;padding:10px 13px;" v-for="item in dataList">
                <div>
                  <img :src="item.image" style="width: 236px;height: 180px;border: 1px solid black;" alt="">
                  <h3 style="color: black;margin: 0;margin-top: 5px;">{{item.name}}</h3>
                  <el-rate
                    :value="item.star"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                    >
                  </el-rate>
                </div>
                
              </li>
             
          </ul>
        </div>
      </body>
      

      
      <script src="./api/axios.min.js"></script>
      <script src="./api/publicinfo.js"></script>
      <script src="./js/jquery.js"></script>
      <script src="./api/utils.js"></script>

      <script src="./js/vue.js"></script>
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
         function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }
      
      </script>
      <script>
           var app = new Vue({
              el: '#app',
              data:{
                dataList:[],
               
              },
              mounted(){
                if(getQueryVariable("food")=="all"){
                  this.findAll()
                }else{
                  this.findnotALL()
                }   
               
              },
              methods:{
                findAll(){
                  get("/restaurant",{}).then(res=>{
                    console.log(res.data)
                      this.dataList = res.data
                  
                  })
                },
                findnotALL(){
                  post("/restaurant/typeSearch",{food:getQueryVariable("food")}).then(res=>{
                     this.dataList = res.data
                   })
                },
                entry(item){
                  
                  window.location = `resrev.html?id=${item.Restaurant_id}`

          
                }
              }
              
              })
      
      
      </script>
</html>